<template>
  <base-header></base-header>

  <main id="main">
    <div class="container-fluid">
      <div class="banner-sub" :style="bannerSubClass">
        <!-- <img
          :src="
            $route.meta.imgUrl
              ? $route.meta.imgUrl
              : require('@/assets/image/geometric-gb1d80b5b0_1280.jpg')
          "
        /> -->
        <div class="content">
          <!-- <div class="title">{{ $route.meta.title }}</div> -->
        </div>
      </div>
    </div>
    <!-- <router-view v-slot="{ Component }">
      <keep-alive v-if="$route.meta.keepAlive">
        <component :is="Component" :key="$route.fullPath"></component>
      </keep-alive>
      <component :is="Component" v-if="!$route.meta.keepAlive" :key="$route.fullPath"></component>
    </router-view> -->

    <router-view v-slot="{ Component }">
      <component :is="Component" :key="$route.fullPath"></component>
    </router-view>
  </main>

  <base-footer></base-footer>
</template>

<script>
import BaseHeader from "@/components/base/base-header1.vue";
import BaseFooter from "@/components/base/base-footer.vue";

import {
  reactive,
  toRefs,
  onBeforeMount,
  onMounted,
  getCurrentInstance,
  watch,
  computed,
} from "vue";

import { onBeforeRouteUpdate, onBeforeRouteLeave } from "vue-router";

export default {
  name: "ContentLayout",
  components: { BaseHeader, BaseFooter },
  props: {},
  setup() {
    const { proxy } = getCurrentInstance();

    const data = reactive({
      includeList: new Array(),
      bannerSubClass: {
        "background-image": computed(() => {
          var imgUrl = proxy.$route.meta.imgUrl;
          var backgroundImageStyle = imgUrl
            ? `url(${imgUrl})`
            : `url(${require("@/assets/image/blog-banner.jpg")})`;
          return backgroundImageStyle;
        }),
        "background-repeat": "no-repeat",
        "background-position": "center",
      },
    });
    const refData = toRefs(data);

    onBeforeMount(() => {});
    onMounted(() => {
      console.log(
        "proxy.$route.meta.keepAlive",
        proxy.$route.path,
        proxy.$route.meta.keepAlive
      );
    });
    return {
      ...refData,
    };
  },
};
</script>
<style lang="scss" scoped>
#main {
  // margin-top: 80px;

  .container-fluid {
    padding-right: var(--bs-gutter-x, 0);
    padding-left: var(--bs-gutter-x, 0);
  }
}

.banner-sub {
  position: relative;
  height: 300px;

  img {
    display: block;
    width: 100%;
    max-height: 300px;
  }

  .content {
    width: 100%;
    position: absolute;
    z-index: 1;
    top: 0;
    right: 0;
    bottom: 5%;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;

    .title {
      width: 100%;
      color: #ffffff;
      font-size: 3rem;
      font-weight: 300;
      letter-spacing: -2px;
      text-align: center;
    }

    .subTitle {
    }
  }
}
</style>
